
import { useState } from 'react';
import Sidebar from './components/Sidebar';
import TrainModelView from './components/TrainModelView';
import ValidateModelView from './components/ValidateModelView';
import TestModelView from './components/TestModelView';
import UserTestView from './components/UserTestView';
import GenerateJsonView from './components/GenerateJsonView';
import MatrixRain from './components/MatrixRain';
import { Page } from './types';

const App = () => {
  const [currentPage, setCurrentPage] = useState<Page>(Page.Train);
  const [isGpuBusy, setIsGpuBusy] = useState(false);
  const [statusMessage, setStatusMessage] = useState('状态: 空闲');

  const renderPage = () => {
    const props = { isGpuBusy, setIsGpuBusy, setStatusMessage };
    switch (currentPage) {
      case Page.Train:
        return <TrainModelView {...props} />;
      case Page.Validate:
        return <ValidateModelView {...props} />;
      case Page.Test:
        return <TestModelView {...props} />;
      case Page.UserTest:
        return <UserTestView {...props} />;
      case Page.GenerateJson:
        return <GenerateJsonView setStatusMessage={setStatusMessage} />;
      default:
        return <TrainModelView {...props} />;
    }
  };

  return (
    <div className="flex h-screen w-screen text-green-300 bg-black/80">
      <MatrixRain />
      <div className="relative flex h-full w-full border-2 border-green-900/50 backdrop-blur-[1px]">
        <Sidebar currentPage={currentPage} setCurrentPage={setCurrentPage} isGpuBusy={isGpuBusy} />
        <main className="flex-1 flex flex-col overflow-hidden">
            <div className="flex-grow overflow-hidden">
              {renderPage()}
            </div>
            <footer className="px-4 py-1 bg-black/80 border-t-2 border-green-900/50 text-xs text-cyan-400 font-mono">
                &gt; {statusMessage}
                <span className="animate-ping">_</span>
            </footer>
        </main>
      </div>
    </div>
  );
};

export default App;
